/**
 * <Route /> 组件的三种渲染方式
 *    1. component 方式
 *      <Route path="" component={Home} />
 *    2. render 方式
 *      <Route path="" render={渲染函数} />
 *    3. children 方式
 *      <Route path="">
 *        <xxx />
 *      </Route>
 *
 *    三者选择一个使用即可。
 *    三者的区别是什么：
 *      1. 组件的调用方式不一样，组件会收到的props会不一样。
 *          1. component 方式渲染的组件，会自动收到 路由相关的三个prop
 *          2. render 方式渲染的组件，不会自动收到 路由相关的prop
 *          3. children 方式渲染的组件，不会自动收到 路由相关的prop
 *
 *   1. 如何让 render 方式渲染的组件，也能获取到 路由相关的prop呢？
 *        render 函数，会接受到一个 props 参数，该 props 参数中有路由相关的内容，转发到需要渲染的组件上即可。
 *   2. 如何让 children 方式渲染的组件，也能获取到 路由相关的prop呢？
 *        children 也能写成一个 render 函数的形式，函数也能收到路由相关的props，转发即可。
 */

import { Route, Switch } from "react-router-dom";

function Home() {
  return (
    <div>
      <h4>Home</h4>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>App</h1>
      <hr />

      <Switch>
        {/* <Route path="/home" component={Home} /> */}

        {/* <Route
          path="/home"
          render={(porps) => {
            console.log("render props", porps);
            return <Home {...porps} />;
          }}
        /> */}

        <Route path="/home">
          {(props) => {
            console.log("children props", props);
            return <Home {...props} />;
          }}
        </Route>
      </Switch>
    </div>
  );
}

export default App;
